
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 车 辆 列 表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.mobile"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="账号"
                    class="handle-input mr10"
                ></el-input>
                <el-input
                    clearable
                    v-model="query.vehicleNo"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="车牌号"
                    class="handle-input mr10"
                ></el-input>
                <el-button type="primary" @click="getList">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="vehicleNo" label="车牌号" align="center"></el-table-column>
                <el-table-column prop="ownerName" label="车主姓名" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.accountTypeName == 10" style="color:#ed1941">支出</span>
                    <span v-if="scope.row.accountTypeName == 20" style="color:#45b97c">收入</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="idCardNo" label="身份证号码" width="150" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.fundTypeName == 10" >余额</span>
                    <span v-if="scope.row.fundTypeName == 20" >期权</span>
                    <span v-if="scope.row.fundTypeName == 30" >互助</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="phone" label="联系电话" width="100" align="center">
                    <!-- <template slot-scope="scope">
                    {{ scope.row.category | tyepFilter }}
                  </template> -->
                </el-table-column>
                <el-table-column prop="vin" label="车辆识别号" width="100" align="center"></el-table-column>
                <el-table-column prop="brand" label="品牌" width="100" align="center"></el-table-column>
                <el-table-column prop="modelNo" label="型号" width="100" align="center"></el-table-column>
                <el-table-column prop="status" label="审核状态" width="100" align="center">
                    <template slot-scope="scope">
                        <span :style="`color:${scope.row.status == '审核通过' ? '#409EFF' : 'red'}`">{{ scope.row.status }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isApproval" label="是否可审批" width="100" align="center">
                    <template slot-scope="scope">
                        <span :style="`color:${scope.row.isApproval ? '#409EFF' : 'red'}`">{{ scope.row.isApproval ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="helpOn" label="时间" width="200" align="center"></el-table-column>
                <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="searchDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog title="详情" :visible.sync="showEdit" width="600px">
            <el-form ref="send" :model="editFrom" label-width="120px" label-position="right">
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="真实姓名:">{{ editFrom.realName }}</el-form-item>
                    <el-form-item style="flex: 1" label="身份证号码:">{{ editFrom.idCardNo }}</el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="联系电话:">{{ editFrom.phone }}</el-form-item>
                    <el-form-item style="flex: 1" label="车牌号:">{{ editFrom.vehicleNo }}</el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="车架号:">{{ editFrom.vin }}</el-form-item>
                    <el-form-item style="flex: 1" label="车辆品牌:">{{ editFrom.brand }}</el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="型号:">{{ editFrom.modelNo }}</el-form-item>
                    <el-form-item style="flex: 1" label="状态:">
                        <span>{{ editFrom.status }}</span>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="申请时间:">{{ editFrom.createdOn }}</el-form-item>
                    <el-form-item style="flex: 1" label="审核时间:">{{ editFrom.auditOn }}</el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="身份证正面图片:">
                        <el-image style="width: 100px" :src="editFrom.idCardFront" :preview-src-list="[editFrom.idCardFront]"> </el-image>
                    </el-form-item>
                    <el-form-item style="flex: 1" label="身份证反面图片:">
                        <el-image style="width: 100px" :src="editFrom.idCardBack" :preview-src-list="[editFrom.idCardBack]"> </el-image>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="行驶证主页图片:">
                        <el-image
                            style="width: 100px"
                            :src="editFrom.drivingLicenseMainpage"
                            :preview-src-list="[editFrom.drivingLicenseMainpage]"
                        >
                        </el-image>
                    </el-form-item>
                    <el-form-item style="flex: 1" label="行驶证副页图片:">
                        <el-image
                            style="width: 100px"
                            :src="editFrom.drivingLicenseSubpage"
                            :preview-src-list="[editFrom.drivingLicenseSubpage]"
                        >
                        </el-image>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="车身左前照片:">
                        <el-image style="width: 100px" :src="editFrom.vehicleLeftFront" :preview-src-list="[editFrom.vehicleLeftFront]">
                        </el-image>
                    </el-form-item>
                    <el-form-item style="flex: 1" label="车身右后照片:">
                        <el-image style="width: 100px" :src="editFrom.vehicleRightBehind" :preview-src-list="[editFrom.vehicleRightBehind]">
                        </el-image>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item style="flex: 1" label="审核失败原因:" v-if='editFrom.status == "审核失败"'>{{ editFrom.auditRemark }}</el-form-item>
                    <el-form-item style="flex: 1" label="可参与互助时间:" v-if='editFrom.status == "审核通过"'>{{ editFrom.helpOn }}</el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bohui" :disabled='editFrom.status == "审核失败"'>审批驳回</el-button>
                <el-button type="primary" @click="successOne" :disabled='editFrom.status == "审核通过"'>审批通过</el-button>
            </span>
        </el-dialog>

        <el-dialog title="审批成功" :visible.sync="showSure" width="500px">
            <el-form ref="send" :model="sureFrom" label-width="150px">
                <el-form-item label="可参与互助时间:">
                    <el-date-picker v-model="sureFrom.helpNo" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showSure = false">取 消</el-button>
                <el-button type="primary" @click="sureData">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="审批驳回" :visible.sync="showbh" width="500px">
            <el-form ref="send" :model="bohuiFrom" label-width="100px">
                <el-form-item label="驳回原因:">
                    <el-input type="textarea" rows="5" v-model="bohuiFrom.auditRemark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showbh = false">取 消</el-button>
                <el-button type="primary" @click="bhData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingVehicle, QueryVehicle, Success,Fail } from '@/api/car';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                mobile: ''
            },
            tableData: [],
            pageTotal: 0,
            showEdit: false,
            editFrom: {},
            showSure: false,
            sureFrom: {},
            bohuiFrom:{},
            showbh:false
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingVehicle(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(row) {
            this.showEdit = true;
            this.bohuiFrom.id = row.id;
            this.sureFrom.id = row.id;
            QueryVehicle({ id: row.id }).then((res) => {
                this.editFrom = res.Data;
            });
        },
        successOne() {
            // this.sureFrom.id = this.editFrom.id;
            this.showSure = true;
        },
        sureData() {
            Success(this.sureFrom).then(res => {
              // console.log(res)
              if(res.RequestStatus == 200){
                this.$message.success('审核成功')
                QueryVehicle({ id: this.sureFrom.id }).then((res) => {
                    this.editFrom = res.Data;
                });
              this.showSure = false;
                this.sureFrom.helpNo = ''
              }
            });
        },
        bohui(){
          this.showbh = true
          // Fail(this.bohuiFrom)
        },
        bhData(){
          Fail(this.bohuiFrom).then(res => {
              // console.log(res)
              if(res.RequestStatus == 200){
                this.$message.success('驳回成功')
                QueryVehicle({ id: this.bohuiFrom.id }).then((res) => {
                    this.editFrom = res.Data;
                });
              this.showbh = false;
                this.bohuiFrom.auditRemark = ''
              }
            });
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>